<template>

  <n-carousel
      direction="vertical"
      :dot-placement="mydotplacement"
      mousewheel
      style="width: 100%; height: 100vh"
      ref="carousel"
      @update:current-index="carouselchange"
  >
    <!--    关于我们-->
    <n-carousel-item>
      <div class="about">
        <div class="logo">
          <a href="">繁</a>
          <a class="on" href="">简</a>
          <a href="">EN</a>
        </div>
        <img class="carousel-img" src="../assets/images/banner.png">
      </div>
    </n-carousel-item>
    <n-carousel-item><img class="carousel-img" src="../assets/images/banner2.png"></n-carousel-item>
    <n-carousel-item>
      <div class="about">
        <div class="logo"><img src="../assets/images/logo_white.png" alt=""></div>
        <div class="about_content">
          <div class="title">科技向善 赋能梦想</div>
          <div class="msg">我们是一家专注早期和成长期科技投资的创投机构，<br/>为追求梦者成就梦想，致力打造一个更美好的时代。</div>
        </div>
      </div>
    </n-carousel-item>
    <n-carousel-item>
      <div class="about1">
        <div class="logo"><img src="../assets/images/logo.png" alt=""></div>
        <div class="inv_content">
          <div class="title">我们也是创业者</div>
          <div class="msg">我们在路上有过努力，有过挫折，也有过收获。<br/> 所以我们更專注于辅助有远见的创业者，为他们的梦想赋能，一起成长。</div>
        </div>

      </div>
    </n-carousel-item>
    <n-carousel-item>
      <div class="about2">
        <div class="logo"><img src="../assets/images/logo.png" alt=""></div>
        <div class="items_content">
          <div class="msg">
            <div class="left">
              <div class="dot dot1">
                <img src="../assets/images/dot1.png" alt="">
                <span>San<br>Francisco</span>
              </div>
              <div class="dot dot2">
                <img src="../assets/images/dot2.png" alt="">
                <span>London</span>
              </div>
              <div class="dot dot3">
                <img src="../assets/images/dot3.png" alt="">
                <span>Chengdu</span>
              </div>
              <div class="dot dot4">
                <img src="../assets/images/dot4.png" alt="">
                <span>Shenzhen</span>
              </div>
              <div class="dot dot5">
                <img src="../assets/images/dot5.png" alt="">
                <span>Hong Kong</span>
              </div>
              <div class="dot dot6">
                <img src="../assets/images/dot6.png" alt="">
                <span>Singapore</span>
              </div>
              <div class="dot dot7">
                <img src="../assets/images/dot7.png" alt="">
                <span>Sydney</span>
              </div>
              <img class="map" src="../assets/images/map.png" alt="">
            </div>
            <div class="right">
              <div class="title">始于美国<br>现立足全球</div>
              <div class="des">我们在世界各地采用本土化战略，及早获得各地交易资讯，连通市场，<br>投资足迹现遍布全球。<br><br>我们亦通过广泛的人脉网络，识别最新的技术趋势，奠定投资基础。</div>
            </div>
          </div>
        </div>
      </div>
    </n-carousel-item>
    <!--    投资重点-->
    <n-carousel-item>
      <div class="inv">
        <div class="logo"><img src="../assets/images/logo.png" alt=""></div>
        <div class="inv_content">
          <div class="left">
            <div class="title">投资重点</div>
            <div class="msg">我们推崇深度技术，特别是人工智能、区块链、游戏和元宇宙这四大领域。</div>
          </div>
          <div class="right">
            <div class="a1"><img src="../assets/images/a1.png" alt="">
              <span>人工智能</span>
            </div>
            <div class="a2"><img src="../assets/images/a2.png" alt="">
              <span>区块链</span>
            </div>
            <div class="a3"><img src="../assets/images/a3.png" alt="">
              <span>游戏</span>
            </div>
            <div class="a4"><img src="../assets/images/a4.png" alt="">
              <span>元宇宙</span>
            </div>
          </div>
        </div>

      </div>
    </n-carousel-item>
    <!--    投资项目-->
    <n-carousel-item>
      <div class="items">
        <div class="logo"><img src="../assets/images/logo.png" alt=""></div>
        <div class="content">
          <div class="title">最近投资的项目</div>
          <div class="list">
            <dl>
              <dd class="img"><a href="https://rescale.com/" _blank="self"><img src="../assets/images/item1.png" alt=""></a>
              </dd>
              <dt>Rescale</dt>
              <dd class="des">高性能计算机和云管理软件技术公司</dd>
            </dl>
            <dl>
              <dd class="img"><a href="https://www.workramp.com/ "><img src="../assets/images/item2.png" alt=""></a>
              </dd>
              <dt>WorkRamp</dt>
              <dd class="des">企业学习管理系统平台</dd>
            </dl>
            <dl>
              <dd class="img"><a href="https://www.suntisfy.com/ "><img src="../assets/images/item3.png" alt=""></a>
              </dd>
              <dt>Suntisfy</dt>
              <dd class="des">跨境玩具电商</dd>
            </dl>
            <dl>
              <dd class="img"><a href="https://www.zenithtechnologies.com/"><img src="../assets/images/item4.png"
                                                                                 alt=""></a></dd>
              <dt>Zenith</dt>
              <dd class="des">生命科学自动化系统软件供应商</dd>
            </dl>
            <dl>
              <dd class="img"><a href="https://www.finnt.com/"><img src="../assets/images/item5.png" alt=""></a></dd>
              <dt>Finnt</dt>
              <dd class="des">去中心化金融产品（DeFi）平台开发商</dd>
            </dl>
            <dl>
              <dd class="img"><a href="https://www.lifo.ai/"><img src="../assets/images/item6.png" alt=""></a></dd>
              <dt>Lifo</dt>
              <dd class="des">社交媒体创作者电子商务平台</dd>
            </dl>
          </div>
          <div class="title">我们的合作伙伴</div>
          <div class="list">
            <dl>
              <dd class="img"><img src="../assets/images/item01.png" alt=""></dd>
            </dl>
            <dl>
              <dd class="img"><img src="../assets/images/item02.png" alt=""></dd>
            </dl>
            <dl>
              <dd class="img"><img src="../assets/images/item03.png" alt=""></dd>
            </dl>
          </div>
        </div>
      </div>
    </n-carousel-item>
    <n-carousel-item>
      <div class="news">
        <div class="logo"><img src="../assets/images/logo.png" alt=""></div>
        <div class="news_content">
          <div class="title">新闻中心</div>
          <div class="list">
            <div class="sub">
              <img src="../assets/images/news1.png" alt="">
              <div class="msg">
                <a href="https://www.cnbc.com/2022/06/03/cryptocurrency-industry-focus-regulation-stablecoins-market-crash.html">
                  <div class="des">After the crypto crash, here’s what industry experts are waiting for next</div>
                  <div class="line"></div>
                  <div class="date">2022-02-02</div>
                </a>
              </div>
            </div>
            <div class="sub">
              <img src="../assets/images/news2.png" alt="">
              <div class="msg">
                <a href="https://www.coindesk.com/learn/the-fall-of-terra-a-timeline-of-the-meteoric-rise-and-crash-of-ust-and-luna/">
                  <div class="des">After the crypto crash, here’s what industry experts are waiting for next</div>
                  <div class="line"></div>
                  <div class="date">2022-02-02</div>
                </a>
              </div>
            </div>
            <div class="sub">
              <img src="../assets/images/news3.png" alt="">
              <div class="msg">
                <a href="https://www.bloomberg.com/news/articles/2022-04-13/circle-bank-charter-application-coming-in-near-future?srnd=crypto-regulation">
                  <div class="des">After the crypto crash, here’s what industry experts are waiting for next</div>
                  <div class="line"></div>
                  <div class="date">2022-02-02</div>
                </a>
              </div>
            </div>
            <div class="sub">
              <img src="../assets/images/news4.png" alt="">
              <div class="msg">
                <a href="https://www.coindesk.com/policy/2022/06/03/japan-passes-landmark-stablecoin-bill-for-investor-protection-report/">
                  <div class="des">After the crypto crash, here’s what industry experts are waiting for next</div>
                  <div class="line"></div>
                  <div class="date">2022-02-02</div>
                </a>
              </div>
            </div>
            <div class="sub">
              <img src="../assets/images/news5.png" alt="">
              <div class="msg">
                <a href="https://www.coindesk.com/sponsored-content/infrastructure-signing-authority-and-governance-the-atlas-we-need-to-navigate-the-trilemma/">
                  <div class="des">After the crypto crash, here’s what industry experts are waiting for next</div>
                  <div class="line"></div>
                  <div class="date">2022-02-02</div>
                </a>
              </div>
            </div>
          </div>
          <div class="more"><a href="#news">阅读更多</a></div>
        </div>
      </div>
    </n-carousel-item>
    <n-carousel-item>
      <div class="contact">
        <div class="logo"><img src="../assets/images/logo.png" alt=""></div>
        <div class="img">
        </div>
        <div class="msg">
          <div class="title">联系我们</div>
          <div class="des">我们很高兴与您保持联系，无论是一般事项或媒体查询，我们的代表都会尽快与您联系。</div>
          <div class="but"><span><a href="https://www.linkedin.com/company/dna-capital-ltd/"><img src="../assets/images/share1.png" alt=""></a> <a href="mailto:Contact@dnacap.fund"><img
              src="../assets/images/share2.png"
              alt=""></a></span><a class="abut" href="#">你在寻找资金吗？<img
              src="../assets/images/next.png" alt=""></a></div>
        </div>
      </div>
    </n-carousel-item>
    <n-carousel-item>
      <i-feedback></i-feedback>
    </n-carousel-item>
  </n-carousel>

  <i-menu></i-menu>
  <div class="up" v-if="activeindex>0"><img src="../assets/images/up.png" alt="" @click="jump(0)"></div>
</template>

<script>
import {defineComponent, computed, ref} from "vue";
import Menu from '../components/Menu'
import Feedback from './Feedback'

export default defineComponent({
  setup() {
    const defaultdotplacement = ref('bottom')
    const activeindex = ref(0)
    return {
      mydotplacement: defaultdotplacement,
      activeindex: activeindex,
      carouselchange(index) {
        (index >= 1) ? defaultdotplacement.value = "left" : defaultdotplacement.value = "bottom"
        activeindex.value = index
      },
    }
  },
  methods: {
    jump(n) {
      this.$refs.carousel.to(n)
    },
  },

  components: {
    'i-menu': Menu,
    'i-feedback': Feedback,
  }


});
</script>

<style cssr-id="n-carousel" scoped>
.carousel-img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

</style>